<template>
  <!--<div>13</div>-->
  <div>
    <div id="mychart0" class="chart-draw-element chart-draw-element-visitor" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<script lang="ts">
  import eCharts from 'echarts';
  import {VueComponent, Component, Prop} from "../modules";
  @Component({})
  export default class testChart extends VueComponent {
    @Prop({default: []})
    public item: object[];
    public toBack: boolean = false;
    public chart: any = null;
    public option: any = {
      title: {
        text: '对数轴示例',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
      },
      legend: {
        left: 'left',
        data: ['2的指数', '3的指数', '1/2的指数0']
      },
      xAxis: {
        type: 'category',
        name: 'x',
        splitLine: {show: false},
        data: this.item
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      yAxis: {
        type: 'log',
        name: 'y'
      },
      series: [
        {
          symbolSize: 20,
          name: '3的指数',
          type: 'line',
          data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
        },
        {
          symbolSize: 15,
          name: '2的指数',
          type: 'line',
          data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
        },
        {
          symbolSize: 10,
          name: '1/2的指数',
          type: 'line',
          data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
        }
      ]
    };
    public created () {
    }
    public mounted() {
      const id = document.getElementById("mychart0");
      this.chart   = eCharts.init(id);
      this.chart.setOption(this.option);
      setTimeout(() => {
        window.onresize = () => {
          this.chart.resize();
        }
      }, 500);
      this.chart.on("click", (w: any) => {
        console.log(w);
      });
      this.option.xAxis.data = this.item;
      this.chart.setOption(this.option);
      console.log(this.item, "456465455545455");
    }
    public setItem (item: any) {
      this.option.xAxis.data = item;
      this.chart.setOption(this.option);
    }
  }
</script>

<style module lang="less">
  @import "~styles/config/config";

</style>